<template>
  <div>
    <van-row type="flex" justify="space-around" class="header">
      <van-col span="6" style="text-align: center">
        <router-link to="/watchhistory" tag="div">
          <a-icon type="clock-circle" class="iconfont" />
          <br />
          <span>观看记录</span>
        </router-link>
      </van-col>

      <van-col span="6" style="text-align: center">
        <router-link to="/chatwithperson" tag="div">
          <a-icon type="customer-service" class="iconfont" />
          <br />
          <span>客服中心</span>
        </router-link>
      </van-col>

      <van-col span="6" style="text-align: center">
        <router-link to="/setting" tag="div">
          <a-icon type="setting" class="iconfont" />
          <br />
          <span>设置中心</span>
        </router-link>
      </van-col>
    </van-row>
    <div class="mine">
      <div class="mine-top">
        <span class="invitation"> 与我相关 </span>
        <router-link to="/sendPost">
          <van-icon name="add" class="add" />
        </router-link>
      </div>
      <div class="mine-body">
        <div v-if="!isLogin"></div>
        <div v-else>
          <WaterFall :postList="mylist"></WaterFall>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import WaterFall from "@/components/WaterFall";
import { participation } from "@/api/api";
import { mapState } from "vuex";
export default {
  name: "UserCenterMine",
  components: {
    WaterFall,
  },
  data() {
    return {
      mylist: [],
    };
  },
  created() {
    participation().then((res) => {
      this.mylist = res.data.rows;
      this.$store.state.likeNumber = 0;
      if (this.mylist != undefined) {
        // console.log(this.mylist); 
        for (let i = 0; i < this.mylist.length; i++) {
          this.$store.state.likeNumber += Number(this.mylist[i].zan);
          // console.log(this.mylist[i].zan)
        }
      }
    });
  },
  computed: {
    ...mapState({
      isLogin: "isLogin",
    }),
  },
};
</script>

<style scoped lang="less">
.header {
  margin-top: 20px;

  .iconfont {
    font-size: 25px;
    font-weight: 700;
    margin-bottom: 10px;
  }

  span {
    font-size: 14px;
  }
}

.mine {
  margin-top: 20px;

  .mine-top {
    overflow: hidden;
    margin: 0 20px;

    .invitation {
      display: inline-block;
      width: 90px;
      height: 40px;
      border-radius: 20px;
      background-color: #2c3e50;
      color: white;
      text-align: center;
      line-height: 40px;
    }

    .add {
      float: right;
      color: #dddddd;
      font-size: 35px;
      margin-top: 5px;
    }
  }
}
</style>